<template>
  <div class="header-opt-box">
    <div class="direction-box">
      <div
        class="direction-item"
        v-for="(item, index) in directionData"
        :key="index"
        :class="{ cur: directionIndex == index }"
        @click="handleChange(index)"
      >
        <img
          :src="item.curIcon"
          :alt="item.name"
          v-if="directionIndex == index"
        />
        <img :src="item.icon" :alt="item.name" v-else />
      </div>
    </div>
    <div class="size-box">
      <div class="size-btn reduce" @click="handleReduce"></div>
      <div class="size-value">{{ size }}%</div>
      <div class="size-btn add" @click="handleAdd"></div>
    </div>
    <div class="history-btn">
      <!-- <div class="icons" @click="handleStep(0)">
        <img src="@/assets/icon-arrow-left.png" class="icon" alt="" />
      </div> -->
      <div
        class="icons"
        @click="handleStep(1)"
        :class="{ disbaled: props.isDisabledStep }"
      >
        <img src="@/assets/icon-arrow-right.png" class="icon" alt="" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
const props = defineProps({
  isDisabledStep: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["changeSize", "changeDirection", "changeStep"]);

const size = ref(60);
const handleMessage = async (e: any) => {
  if (e.data.type === "windowSizeChange") {
    console.log("接收iframe的窗口大小变化：", e.data);
    size.value = e.data.data.size;
  }
};
onMounted(() => {
  window.addEventListener("message", handleMessage);
});
onUnmounted(() => {
  window.removeEventListener("message", handleMessage);
});

const directionIndex = ref(0);
const directionData = ref([
  {
    icon: "./icons/icon-direction-1.png",
    curIcon: "./icons/icon-direction-1-cur.png",
    name: "前",
  },
  {
    icon: "./icons/icon-direction-2.png",
    curIcon: "./icons/icon-direction-2-cur.png",
    name: "左",
  },
  {
    icon: "./icons/icon-direction-3.png",
    curIcon: "./icons/icon-direction-3-cur.png",
    name: "右",
  },
  {
    icon: "./icons/icon-direction-4.png",
    curIcon: "./icons/icon-direction-4-cur.png",
    name: "后",
  },
]);

const handleAdd = () => {
  if (size.value == 100) return;
  size.value += 10;
  emit("changeSize", size.value);
};
const handleReduce = () => {
  if (size.value <= 10) return;
  size.value -= 10;
  emit("changeSize", size.value);
};

const handleChange = (index: any) => {
  directionIndex.value = index;
  // 0 前，1左，2右，3后
  emit("changeDirection", index);
};

const handleStep = (type: any) => {
  if (props.isDisabledStep) {
    return;
  }
  //0后退 1前进
  emit("changeStep", type);
};
</script>
<style lang="less" scoped>
.header-opt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  .direction-box {
    height: 26px;
    background: #f6f7fa;
    border: 0.5px solid #e7e8ee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 1px;
    margin-right: 30px;
    .direction-item {
      width: 30px;
      height: 24px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      &.cur {
        background: #1447ff1a;
        border-radius: 4px;
      }
    }
  }
  .size-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24px;
    .size-btn {
      width: 26px;
      height: 26px;
      background: #ffffff;
      border: 0.5px solid #e6ebf1;
      border-radius: 4px;
      cursor: pointer;
      &.add {
        background: url("@/assets/icon-add.png") no-repeat center;
      }
      &.reduce {
        background: url("@/assets/icon-reduce.png") no-repeat center;
      }
    }
    .size-value {
      width: 54px;
      margin: 0 8px;
      height: 26px;
      background: #f6f7fa;
      border: 0.5px solid #e7e8ee;
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 12px;
      color: #262930;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    .icons {
      width: 26px;
      height: 26px;
      background: #ffffff;
      border: 0.5px solid #e6ebf1;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16px;
      cursor: pointer;
      &.disbaled {
        cursor: not-allowed;
        opacity: 0.5;
      }
      .icon {
        width: 14px;
        height: 12px;
      }
    }
  }
}
</style>
